<template>
<div id="homeBox">
<el-container>
  <el-header>
    <el-row :gutter="20"  style="display: flex;width: 100%;">
        <el-col :span="4" style="display: flex;">
            <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                <img src="../assets/logo2.png" style="width:100%;height:auto;">
            </div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple logo" style="font-size:25px">
               <!-- WN综合管理系统 -->
            </div>
        </el-col>
        <el-col :span="12" style="display: flex;justify-content: flex-end; align-items: center;">
            <div class="grid-content bg-purple">
                <el-row :gutter="20" style="display: flex;justify-content: flex-end;">
                    <el-col :span="20" style="display: flex;justify-content: flex-end;">
                        <div class="grid-content bg-purple register">
                            <el-button type="text"  @click="registerVisible = true">注册</el-button>
                             <el-button type="text" @click="centerDialogVisible = true">登录</el-button>
                        </div>
                    </el-col>               
                </el-row>
            </div>
        </el-col>
    </el-row>    
  </el-header>
  <el-main>
       <img src="../assets/login1.png">
      <!-- <el-carousel>
        <el-carousel-item v-for="src in srcs" :key="src">
         <el-image :src="src"></el-image>
        </el-carousel-item>
    </el-carousel> -->
  </el-main>
</el-container>

<!-- //登录弹框 -->
<el-dialog
  title="登录"
  :visible.sync="centerDialogVisible"
  width="30%"
  center
  :show-close=false>  
  <el-form>
  <el-form-item >
    <el-input prefix-icon="el-icon-user" v-model="name" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="密码" show-password></el-input>
  </el-form-item>
    <el-button type="text" @click="forgetDialogVisible = true">忘记密码？</el-button>
    <el-button type="text" @click="registerVisible = true">马上注册</el-button>
  <el-form-item>
     <el-button type="primary" v-on:click="login" style="width: 100%;">登录</el-button>
  </el-form-item>
</el-form>
</el-dialog>


<!-- //注册弹框 -->
<el-dialog
  title="注册"
  :visible.sync="registerVisible"
  width="30%"
  center
  :show-close=false>  
  <el-form>
  <el-form-item >
    <el-input prefix-icon="el-icon-user" v-model="name" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="密码" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="确定密码" show-password></el-input>
  </el-form-item>
  <!-- <el-form-item> -->
    <el-checkbox v-model="checked">我已完整阅读并接受《<span style="color:6CB7E9">用户服务协议</span>》各项条款</el-checkbox>
  <!-- </el-form-item> -->
  <el-form-item>
     <el-button type="primary" v-on:click="register" style="width: 100%;">注册</el-button>
  </el-form-item>
</el-form>
</el-dialog>

<!-- //重置密码弹框 -->
<el-dialog
  title="重置密码"
  :visible.sync="forgetDialogVisible"
  width="30%"
  center
  :show-close=false>  
  <el-form>
  <el-form-item >
    <el-input prefix-icon="el-icon-user" v-model="name" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="密码" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="确定密码" show-password></el-input>
  </el-form-item>
  <el-form-item>
     <el-button type="primary" v-on:click="resetPass" style="width: 100%;">提交</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</div> 
</template>
<script>
export default{
    name:'Login',
    data(){
        return{
            labelPosition: 'right',
            name:'',
            password:'',
            checked:true,
            centerDialogVisible: false,
            registerVisible:false,
            forgetDialogVisible:false,
            activeIndex: '1',
            activeIndex2: '1',
             srcs: [
                 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
             ],
        }
    },
    methods: {
        //登录成功跳转
        login:function(){
            this.$router.push({path:'/index/home'});
            window.location.reload();
        },
        //注册成功直接跳转主页  
        register:function(){
            this.$router.push({path:'/index/home'});
            window.location.reload();
        },
        //forget password
        resetPass:function(){
            this.forgetDialogVisible=false;
            this.centerDialogVisible=false;
        },
    }
}
</script>
<style leng='scss'>
html,body,#homeBox,#app{
    height:100%;
    overflow: hidden;
}
#homeBox{
    /* border:1px solid red; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #D3DCE6; */
}
.el-container{
    height:100%;
    /* border: 1px solid #B3C0D1; */
}
.el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
}
.el-footer {
    background-color: #fff;
    color: #333;
    display: flex;
    align-items: center;
}
.el-main{
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    padding:0px;
    overflow: hidden;
}
.logo{
    display: flex;
    justify-content: end;
}
.el-menu-top{
    display: flex;
    justify-content: flex-end;
}
.register{
    display: flex;
    justify-content: flex-end;
}

.el-carousel{
    height:100%
}
.el-carousel__container {
    position: relative;
    height: 100%;
}
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}

.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-input{
    width:100%;
}
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #DCDFE6;
    border-image: linear-gradient(244deg, rgba(255,255,255,0) 0%, #409EFF 50%,rgba(255,255,255,0) 100%) 1 10;
    
}

</style>